<template>
  <div class="fan-carousel" :class="containerClass">
    <div class="carousel-track" ref="track">
      <div 
        v-for="(item, index) in items" 
        :key="index"
        :class="['carousel-item', getItemClass(index)]"
        :style="getItemStyle(index)"
        @click="handleItemClick(index)"
      >
        <div class="item-content">
          <slot 
            name="item" 
            :item="item" 
            :index="index" 
            :is-active="index === currentIndex"
            :on-click="() => handleItemClick(index)"
          >
            <!-- 默认内容：使用SwiperCarousel显示item.items中的所有内容 -->
            <SwiperCarousel
              :items="item.items"
              :autoPlay="index === currentIndex"
              :autoPlayInterval="5000"
              :showPagination="true"
              :showNavigation="false"
              container-class="embedded-swiper"
              :loop="true"
              :active="index === currentIndex"
              @itemClick="(data) => handleSwiperItemClick(index, data)"
            />
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BeforeAfterSlider from '../BeforeAfterSlider.vue'
import SwiperCarousel from './SwiperCarousel.vue'
import BaseCarousel from './BaseCarousel.js'

export default {
  name: 'FanCarousel',
  components: {
    BeforeAfterSlider,
    SwiperCarousel
  },
  props: {
    // 初始索引
    initialIndex: {
      type: Number,
      default: 0
    }
  },
  mixins: [BaseCarousel],
  
  methods: {
    getItemClass(index) {
      const offset = this.getNormalizedOffset(index)
      const absOffset = Math.abs(offset)
      
      if (absOffset === 0) return 'fan-active'
      if (absOffset === 1) return 'fan-side'
      if (absOffset === 2) return 'fan-far'
      return 'fan-hidden'
    },
    
    getItemStyle(index) {
      const offset = this.getNormalizedOffset(index)
      const absOffset = Math.abs(offset)
      
      if (absOffset > 2) {
        return {
          display: 'none'
        }
      }
      
      const tiltAngle = offset * 8
      const baseSpacing = 240
      const translateX = offset * baseSpacing
      
      let scale = 1
      let opacity = 1
      let zIndex = 5
      let translateY = 0
      
      if (absOffset === 0) {
        scale = 1.0
        opacity = 1.0
        zIndex = 6
        translateY = 0
      } else if (absOffset === 1) {
        scale = 0.9
        opacity = 0.8
        zIndex = 5
        translateY = (1 - scale) * 140 + 15
      } else if (absOffset === 2) {
        scale = 0.8
        opacity = 0.6
        zIndex = 5
        translateY = (1 - scale) * 140 + 35
      }
      
      return {
        transform: `translateX(${translateX}px) translateY(${translateY}px) rotateZ(${tiltAngle}deg) scale(${scale})`,
        opacity,
        zIndex,
        display: 'block'
      }
    },
    
    getNormalizedOffset(index) {
      const offset = index - this.currentIndex
      const totalItems = this.items.length
      const halfLength = Math.floor(totalItems / 2)
      
      if (offset > halfLength) {
        return offset - totalItems
      } else if (offset < -halfLength) {
        return offset + totalItems
      }
      
      return offset
    },
    
    handleSwiperItemClick(fanIndex, swiperData) {
      // 只有当前激活的扇形轮播项才能响应内部swiper的点击事件
      if (fanIndex === this.currentIndex) {
        this.$emit('swiperItemClick', {
          fanIndex,
          swiperIndex: swiperData.index,
          item: swiperData.item,
          fanItem: this.items[fanIndex]
        })
      }
      // 如果不是激活项，不做任何处理（不切换，不打开画廊）
    }
  },

  mounted() {
    // 设置初始索引
    if (this.initialIndex > 0 && this.initialIndex < this.items.length) {
      this.currentIndex = this.initialIndex
      this.$emit('slideChange', this.initialIndex)
    }
  }
}
</script>

<style scoped>
.fan-carousel {
  position: relative;
  height: 100%;
  width: 100%;
}

.carousel-track {
  position: relative;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.carousel-item {
  position: absolute;
  width: 200px;
  height: 280px;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -140px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  transform-origin: center center;
}

.item-content {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent);
}

.carousel-item.fan-active .item-content {
  /* border-color: #FF6B35; */
  /* box-shadow: 
    0 10px 40px rgba(255, 107, 53, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.2); */
}

.embedded-swiper {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
}

/* 隐藏嵌入swiper的导航按钮 */
.embedded-swiper :deep(.swiper-navigation) {
  display: none !important;
}

/* 调整嵌入swiper的分页器样式 */
.embedded-swiper :deep(.swiper-pagination) {
  bottom: 4px !important;
}

.embedded-swiper :deep(.swiper-pagination-bullet) {
  width: 4px !important;
  height: 4px !important;
  margin: 0 2px !important;
}

</style>